<template>
	<view class="preViewLayOut">
		<swiper circular @click="showMask=!showMask" :current='currentPage' @change='swiperChange'>
			<swiper-item v-for='(item,ind) of ClassifyListData' :key='item._id'>
				<image v-if='picArr.includes(ind)' :src="item.picUrl" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<view class="onAction" v-show="showMask">
			<button class="goBack" @click='goBack'>
				<uni-icons type="back" size="20" color="white"></uni-icons>
			</button>

			<view class="currentPicPage">
				<view class="pageNum">
					<text>{{+currentPage+1}}</text><text>/</text><text>{{ClassifyListData.length}}</text>
				</view>
			</view>

			<view class="time">
				{{h}}:{{m}}
			</view>

			<view class="date">
				<text>{{M}}</text>
				<text>月</text>
				<text>{{D}}</text>
				<text>日</text>
			</view>

			<view class="footer">
				<view class="feature">
					<view class="box" @click="picInfoShow = true">
						<uni-icons type="info" size="30"></uni-icons>
						信息
					</view>
					<view class="box">
						<uni-icons type="star" size="30"></uni-icons>
						{{currentPicData.score}}分
					</view>
					<view class="box" @click="downloadPic">
						<uni-icons type="download" size="30"></uni-icons>
						下载
					</view>
				</view>
			</view>
		</view>

		<view class="picInfo" v-show="picInfoShow">
			<view class="infoTitle">
				<text>壁纸信息</text>
				<button class="closePicInfo" @click="picInfoShow = false">
					<uni-icons type="closeempty" size="10"></uni-icons>
				</button>
			</view>
			<view class="picId">
				壁纸ID：65656565656556565656
			</view>
			<view class="picAuthor">
				发布者：举个路子
			</view>
			<view class="picScore">
				评分：4.5
			</view>
			<view class="picMeta">
				摘要：摘要
			</view>
			<view class="picTag">
				标签：标签
			</view>
			<view class="picNotice">
				声明：声明
			</view>
		</view>


	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		onLoad
	} from '@dcloudio/uni-app'

	//定义预览图数据列表数组
	const ClassifyListData = ref([])

	//定义当前页面page
	const currentPage = ref(0)

	//定义当前壁纸数据
	const currentPicData = ref(null)

	//获取当前点击的page
	onLoad((e) => {
		currentPage.value = e.page
		picArrAdd()
	})

	//定义已经缓存过的图片，放于数组中
	const picArr = ref([])

	function picArrAdd() {
		picArr.value.push(
			currentPage.value == 0 ? ClassifyListData.value.length : currentPage.value - 1,
			+currentPage.value,
			currentPage.value == ClassifyListData.value.length ? 0 : +currentPage.value + 1
		)
		picArr.value = [...new Set([...picArr.value])]
	}


	//定义返回上一页
	function goBack() {
		uni.navigateBack()
	}


	//获取上页面留下的storage缓存
	const listData = uni.getStorageSync('ClassifyListData') || []

	ClassifyListData.value = listData.map(item => {
		return {
			...item,
			picUrl: item.smallPicurl.replace('_small.webp', '.jpg')
		}
	})

	// console.log(ClassifyListData.value)

	//获取当前壁纸数据
	function getCurrentPicData() {
		currentPicData.value = ClassifyListData.value[currentPage.value]
	}

	getCurrentPicData()

	//定义轮播图切换事件
	function swiperChange(event) {
		currentPage.value = event.detail.current
		getCurrentPicData()
		picArrAdd()
		// if (picArr.value.includes(currentPage.value)) {
		// 	return
		// } else {
		// 	picArr.value.push(currentPage.value)
		// }
	}

	async function downloadPic() {
		//预览，urls数组
		// uni.previewImage({
		// 	urls: ClassifyListData.value.map(item => item.picUrl)
		// })

		// #ifdef H5
		uni.showModal({
			showCancel: false,
			// title: '右键或者长按下载',
			content: '右键或者长按下载'
		})
		// #endif

		// #ifndef H5

		// uni.getSetting({
		// 	success(res) {
		// 		if (res.authSetting['scope.writePhotosAlbum']) {

		// 		} else {
		// 			uni.authorize({
		// 				scope: 'scope.writePhotosAlbum',
		// 				success(res) {
		// 					console.log(res);
		// 				},
		// 				fail(res) {
		// 					console.log(res);
		// 					uni.openSetting({
		// 						success(res) {
		// 							console.log(res);
		// 						}
		// 					})
		// 				}
		// 			})
		// 		}
		// 	}
		// })

		uni.showLoading({
			title: '下载中',
			mask: true
		})

		const res = await uni.getImageInfo({
			src: currentPicData.value.picUrl
		})
		uni.saveImageToPhotosAlbum({
			filePath: res.path,
			success(res) {
				uni.hideLoading()
				uni.showToast({
					title: '下载成功！'
				})
			},
			fail(res) {
				uni.hideLoading()
				switch (res.errMsg) {
					case "saveImageToPhotosAlbum:fail auth deny":
						uni.showModal({
							title: "是否打开本地存储权限？",
							success(res) {
								if (res.confirm === true) {
									uni.openSetting({
										success(res) {
											if (res.authSetting['scope.writePhotosAlbum']) {
												uni.showToast({
													title: "权限开启成功！"
												})
											} else if (res.authSetting[
													'scope.writePhotosAlbum'] === false) {
												uni.showToast({
													title: "权限未开启！",
													icon: 'error'
												})
											}
										}
									})
								}
								// else if (res.confirm === false) {
								// 	uni.showToast({
								// 		title: "您已取消授权！",
								// 		icon: 'error'
								// 	})
								// }
							}
						})
						break
					case "saveImageToPhotosAlbum:fail cancel":
						uni.showToast({
							title: "已取消下载！",
							icon: 'error'
						})
						break
					default:
						break
				}
			}
		})

		// uni.getSetting({
		// 	success(res) {
		// 		console.log(res);
		// 	}
		// })

		// #endif
	}


	const showMask = ref(true)
	const picInfoShow = ref(false)
	//获取年月日时分数据
	const dateM = new Date()
	const h = dateM.getHours()
	const m = dateM.getMinutes()
	const M = dateM.getMonth() + 1
	const D = dateM.getDate()
</script>

<style lang="scss" scoped>
	.preViewLayOut {
		width: 750rpx;
		position: relative;
		color: white;

		swiper {
			width: 100%;
			height: 100vh;

			swiper-item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.onAction {
			.goBack {
				width: 75rpx;
				height: 75rpx;
				border-radius: 50%;
				@include flexCenter();
				background-color: rgba(0, 0, 0, 0.3);
				backdrop-filter: blur(20rpx);
				position: absolute;
				left: 30rpx;
				top: 5vh;
			}

			.currentPicPage {
				position: absolute;
				top: 10vh;
				width: 100%;
				height: 40rpx;
				@include flexCenter();

				.pageNum {
					width: fit-content;
					height: 100%;
					@include flexCenter();
					// border: 1px solid black;
					font-size: 20rpx;
					background-color: rgba(0, 0, 0, 0.3);
					backdrop-filter: blur(15rpx);
					border-radius: 20rpx;
					padding: 0 25rpx;

				}

			}

			.time {
				height: 110rpx;
				font-size: 110rpx;
				@include flexCenter();
				position: absolute;
				top: calc(10vh + 80rpx);
				left: 0;
				right: 0;
				font-weight: bold;
			}

			.date {
				height: 30rpx;
				font-size: 30rpx;
				@include flexCenter();
				position: absolute;
				top: calc(10vh + 240rpx);
				left: 0;
				right: 0;

			}

			.footer {
				height: 120rpx;
				position: absolute;
				bottom: 10vh;
				left: 0;
				right: 0;
				@include flexCenter();

				.feature {
					background-color: #fff;
					width: fit-content;
					@include flexCenter();
					height: 100%;
					padding: 0 80rpx;
					border-radius: 60rpx;
					box-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.8);
					backdrop-filter: blur(20rpx);
				}

				.box {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-size: 25rpx;
					height: 100%;
					color: #5e564f;
					margin-right: 120rpx;

					&:nth-last-of-type(1) {
						margin-right: 0;
					}
				}
			}
		}

		.picInfo {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			color: black;
			max-height: 50vh;
			padding-top: 25rpx;
			border-top-right-radius: 25rpx;
			border-top-left-radius: 25rpx;

			.infoTitle {
				display: flex;
				height: 70rpx;
				align-items: center;
			}
		}
	}
</style>